<template>
	<view class="report" style="padding: 30px;background-color: #fff;">
		{{statistics.report}}
		<view style="margin: 30px;">
			<uv-subsection :list="list" :current="current" @change="change"></uv-subsection>
		</view>
		{{statistics.capacity}}
		<view style="margin-top: 30px;">
			{{statistics.keyboard}}
			<view v-for="(item,index) in statistics.keyboard?.mergedStats">
				{{item}}
				---
				{{index}}
				---
				<view :style="[{width: '50px',height: '50px'},{background: bgColor(item)}]"></view>
			</view>
		</view>
		<view style="margin-top: 30px;">
			{{statistics.finger}}
		</view>
	</view>
</template>
<script setup>
	import { computed, reactive, ref } from 'vue';
	import { report, capacity, keyboard } from '@/common/api/stats.js';
	import { getLastDaysTime } from '@/common/utils/index.js';
	import { fingerList } from '@/common/js/keyboard.js';
	const statistics = reactive({
		report: {},
		capacity: {},
		keyboard: {},
		finger: {}
	})
	const colors = uni.$uv.colorGradient('rgb(15, 35, 31)', 'rgb(70, 188, 160)', 100);
	const list = ref(['今天', '过去7天', '过去30天']);
	const current = ref(0);
	const bgColor = computed((item) => {
		return item => {
			let index = Math.round((item.success / (item.success + item.error)) * 100);
			index = index - 1 >= 0 ? index - 1 : 0;
			return colors[index];
		}
	})
	// 你已经好久没来练习啦，定期的练习是保持打字速度和准确性的关键~
	// abilityDesc: "今天勤奋的你也进步了一点，试试坚持连续练习来提升速度吧～"
	// 你已经好久没来练习啦，持之以恒才能更好的提升打字速度哦～
	// abilityLevel: "UNREACHED_LEVEL"
	// abilityTitle: "POTENTIAL"
	// accuracy: 83.33
	// characterId: "601528360006385664"
	// correctWpm: 31.15
	// kpm: 22.5
	// learningTime: 0
	// reportTime: "2024年Q2"
	// wpm: 37
	function change(index) {
		current.value = index;
		getReport();
		getCapacity();
		getKeyboard();
	}

	function getTime() {
		switch (current.value) {
			case 0:
				return getLastDaysTime(0);
			case 1:
				return getLastDaysTime(7);
			case 2:
				return getLastDaysTime(30);
		}
	}
	async function getReport() {
		const characterId = getApp().globalData.dzcharacter?.character?.characterId;
		const { data } = await report({ characterId });
		statistics.report = data;
	}
	async function getCapacity() {
		const characterId = getApp().globalData.dzcharacter?.character?.characterId;
		const { data } = await capacity({ characterId, ...getTime() });
		statistics.capacity = data;
	}
	async function getKeyboard() {
		const characterId = getApp().globalData.dzcharacter?.character?.characterId;
		const { data } = await keyboard({ characterId });
		statistics.keyboard = data;
		statistics.finger = calculateFingerAccuracy(fingerList, statistics.keyboard.mergedStats);
		console.log(statistics.finger)
	}

	function calculateFingerAccuracy(fingerList, keyData) {
		const result = {
			left: {},
			right: {},
			both: {}
		};

		fingerList.forEach(finger => {
			let success = 0,
				error = 0;

			finger.chars.split('').forEach(char => {
				const key = keyData[char];
				if (key) {
					success += key.success;
					error += key.error;
				}
			});

			const total = success + error;
			const accuracy = total > 0 ? Number((success / total * 100).toFixed(2)) : 0;

			if (finger.direction === '左') {
				result.left[finger.name] = accuracy;
			} else if (finger.direction === '右') {
				result.right[finger.name] = accuracy;
			} else {
				result.both[finger.name] = accuracy;
			}
		});
		return result;
	};
	change(0)
</script>
<style scoped lang="scss">
</style>